function GameBoard({ playerName, onScoreUpdate, onLevelChange, scores, onHome }) {
    const [level, setLevel] = React.useState(1);
    const [attempts, setAttempts] = React.useState(0);
    const [grid, setGrid] = React.useState([]);
    const [gameOver, setGameOver] = React.useState(false);
    const [showAnswer, setShowAnswer] = React.useState(false);
    const [timeLeft, setTimeLeft] = React.useState(null);
    const [finalPercentile, setFinalPercentile] = React.useState({ all: 0, daily: 0 });
    const [isColorsHidden, setIsColorsHidden] = React.useState(false);
    const [showHighlight, setShowHighlight] = React.useState(true);
    const size = Math.min(1 + level, 6);
    const maxAttempts = 3;
    const gridRef = React.useRef(null);

    React.useEffect(() => {
        try {
            const colors = generateColors(level);
            const newGrid = generateGrid(size, colors);
            setGrid(newGrid);
            setShowAnswer(false);
            
            // Set time limit based on level
            const timeLimit = getTimeLimit(level);
            setTimeLeft(timeLimit);

            // Update current level in parent component
            onLevelChange(level);

            // Start countdown if there's a time limit
            let timer;
            if (timeLimit) {
                timer = setInterval(() => {
                    setTimeLeft(prevTime => {
                        if (prevTime <= 1) {
                            clearInterval(timer);
                            handleGameOver();
                            return 0;
                        }
                        return prevTime - 1;
                    });
                }, 1000);
            }

            // Cleanup timer
            return () => {
                if (timer) clearInterval(timer);
            };
        } catch (error) {
            reportError(error);
        }
    }, [level]);

    const handleGameOver = () => {
        try {
            setShowAnswer(true);
            setGameOver(true);
            
            // Get historical scores and daily scores for percentile calculation
            const historicalScores = scores?.historical || [];
            const dailyScores = scores?.daily || [];
            const allScores = historicalScores.map(s => s.objectData.score);
            const todayScores = dailyScores.map(s => s.objectData.score);
            
            setFinalPercentile({
                all: calculatePercentile(level, allScores),
                daily: calculatePercentile(level, todayScores)
            });
            onScoreUpdate(level);
        } catch (error) {
            reportError(error);
        }
    };

    const resetGame = () => {
        try {
            setLevel(1);
            setAttempts(0);
            setGameOver(false);
            setShowAnswer(false);
            setTimeLeft(null);
            setFinalPercentile({ all: 0, daily: 0 });
            setIsColorsHidden(false);
            setShowHighlight(true);
            onLevelChange(1);
        } catch (error) {
            reportError(error);
        }
    };

    const handleCellClick = (cell) => {
        try {
            if (gameOver || showAnswer) return;

            if (cell.isDifferent) {
                const newLevel = level + 1;
                setLevel(newLevel);
                setAttempts(0);
            } else {
                const newAttempts = attempts + 1;
                setAttempts(newAttempts);
                
                if (newAttempts >= maxAttempts) {
                    handleGameOver();
                }
            }
        } catch (error) {
            reportError(error);
        }
    };

    const toggleHideColors = () => {
        try {
            setIsColorsHidden(!isColorsHidden);
        } catch (error) {
            reportError(error);
        }
    };

    const handleShuffleGrid = () => {
        try {
            if (gridRef.current && gridRef.current.shuffleGrid) {
                gridRef.current.shuffleGrid();
            }
        } catch (error) {
            reportError(error);
        }
    };

    return (
        <div className="container mx-auto px-4 py-8 max-w-lg relative" data-name="game-board">
            <ColorGrid 
                ref={gridRef}
                grid={grid} 
                size={size} 
                onCellClick={handleCellClick}
                showAnswer={showAnswer && showHighlight}
                isHidden={isColorsHidden}
            />
            <div className="mt-6 relative z-10">
                {gameOver ? (
                    <GameOver 
                        level={level} 
                        onRestart={resetGame}
                        onHome={onHome}
                        playerName={playerName}
                        percentile={finalPercentile}
                        showHighlight={showHighlight}
                        onToggleHighlight={() => setShowHighlight(!showHighlight)}
                    />
                ) : (
                    <LevelInfo 
                        level={level} 
                        attempts={attempts} 
                        maxAttempts={maxAttempts} 
                        showAnswer={showAnswer}
                        timeLeft={timeLeft}
                        onToggleHideColors={toggleHideColors}
                        onShuffleGrid={handleShuffleGrid}
                        isHidden={isColorsHidden}
                    />
                )}
            </div>

            {/* Trickle Credit Card - Only show when game is not over */}
            {!gameOver && (
                <a 
                    href="https://www.trickle.so" 
                    target="_blank" 
                    rel="noopener" 
                    className="fixed bottom-2 left-1/2 -translate-x-1/2 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl p-3 text-center hover:bg-white dark:hover:bg-gray-800 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 group z-0"
                    style={{ width: '240px' }}
                    data-name="trickle-credit"
                >
                    <div className="transition-opacity duration-300 group-hover:opacity-100 opacity-70">
                        <div className="text-[11px] text-gray-500 dark:text-gray-400 mb-1">Powered by</div>
                        <div className="font-semibold text-gray-800 dark:text-gray-200 mb-1.5">
                            <img 
                                src="https://cdn.prod.website-files.com/622ace2bfb12224895648d9c/675149f2b7ee2f8445e5ae49_trickle.svg" 
                                alt="Trickle" 
                                className="h-6 mx-auto trickle-logo"
                            />
                        </div>
                        <div className="text-[10px] leading-relaxed text-gray-600 dark:text-gray-300 font-medium px-2">
                            Create beautiful AI Apps, Websites,<br/>
                            and Forms using plain language
                        </div>
                    </div>
                </a>
            )}
        </div>
    );
}
